<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>选取供应商</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link href="/res/css/respective/priceAsk/buyer.css " rel="stylesheet">  
<link href="/res/third/choosen/chosen.css" rel="stylesheet">
    <style type="text/css">
        .chosen-results{
            width: 100%;
        }
        .mainContent span{
            color: #000;
        }
        .chosen-container{
            float: right;
            margin-top: 10px;
        }
        .chosen-container-single .chosen-single{
            border-radius: 0px;
            height: 34px;
            line-height: 32px;
        }
        .chosen-container-single .chosen-single div{
            top:0px;
            right: 15px;
        }
        .chosen-container-single .chosen-single abbr{
            top:10px;
        }

        .suplyName{
            max-height: 200px;
            overflow: auto;
            clear: both;
        }
        .suplyName dfn.recommend_show{
            display: inline-block;
        }

        .suplyName dfn.recommend_hide{
            display: none;
        }
        .chosen-container-single .chosen-single abbr{
            right:30px;
        }
        .categoryH3Tip{
        	width: auto;
        }
    </style>
    <script src="/res/js/common/jquery.1.9.1.min.js"></script>
    <script src="/res/js/common/common.js"></script>
</head>
<body>
[#assign  menucode ="purchaseEnquiry"]
	<div class="warp">
		[#include "/front/common/front_headAzt.html"]
		<div class="backcontent">
			[#include "/front/common/front_leftAzt.html"] 
			<div class="back-main">
				<div class="mainContent">
		<div class="mainContentWhite">
			<h1>选取供应商</h1>
			<hr>
			<div class="choseBusi" style="height: 60px;">
				<button class="tabButt tabButtActive" atttype="0" type="button">推荐供应商</button>
	            <button class="tabButt" atttype="1"    type="button">集采供应商 </button>
                <button class="tabButt" atttype="2"  type="button">我交易过的供应商   </button>
	            <select id="choosen"   data-placeholder="搜索您想邀请的供应商" style="width:200px;float: right;"  >
	                    <option value="-1"></option>
	                    [#list  recommendset as recommend ]
	                        <option value="${recommend.companyId}">${recommend.companyName}</option>
	                    [/#list]
	                </select>
			</div>
			<div class="suplyInfo">
				<div class="suplyName">
					[#list  recommends as recommend ]
					[#if recommend.type==1]
					<dfn class="recommend_1">
                        <label >
						    <input atttype="1"  id="recommend_${recommend.companyId}" type="checkbox" value="${recommend.companyId}" name="recommend"/><em>${recommend.companyName}</em><strong class="jicai">集采</strong>
                        </label>
					</dfn>
                    [#elseif recommend.type==2 ]
					<dfn class="recommend_2">
                        <label >
						    <input atttype="2"  id="recommend_${recommend.companyId}" type="checkbox" value="${recommend.companyId}" name="recommend"  /><em>${recommend.companyName}</em>[#if recommend.isjicai==1]<strong class="jicai">集采</strong>[/#if]
                        </label>
					</dfn>
                    [#elseif recommend.type==3 ]
                        <dfn class="recommend_3">
                            <label >
                                <input atttype="3" id="recommend_${recommend.companyId}"   type="checkbox" value="${recommend.companyId}" name="recommend"  /><em>${recommend.companyName}</em>[#if recommend.isjicai==1]<strong class="jicai">集采</strong>[/#if]
                            </label>
                        </dfn>
					[/#if]
                    [/#list]
				</div>
			</div>
			<h2>邀请平台外供应商报价
				<small class="itermTip">平台将以短信方式给供应商推荐您的询价需求。</small>
			</h2>
            <div class="lableIterm">
                <form id="subform">
                <label style="margin-left: 30px;">负责人手机：</label>
                <input type="text" class="form-control" placeholder="请输入负责人手机号" id="addtel" name="addtel" style="border-radius: 0px;"/>
                <button class="col-xs-1" id="addtelbtn" style="width: 80px; height: 32px; border-radius: 0px;margin-left: -3px;" onclick="addTel()" type="button">添加</button>
                <dfn class="addBusTip">可填写多家，每输入一个手机号码，点击一次添加。</dfn>
                </form>
            </div>

            <h2 class="thirdTitle">已选择供应商 </h2>
            <hr>
            <div id="company_wrap"  style="padding-left: 30px;">
            </div>

            <div class="form-group" style="text-align: center;">
                <button id="subtn" style="width: 160px;border-radius: 0px;height: 35px;" type="button">下一步，发布询价</button>
            </div>
            [@rule_content code="publish_lists"/]
        </div>
	</div>
			</div>
			<!-- 底部菜单-->
			[#include "/front/common/front_footerAzt.html"]
		</div>

	</div>


    <script id="demo" type="text/html">
        <div class="delSuply" id="id_{{d.id}}" >
        <span class="suplyclass" attype="{{d.type}}" attid="{{d.id}}" attname="{{ d.title }}" >
        {{ d.title }}
        </span>
            <img  class="removesuply" attid="{{d.id}}" src="/res/images/priceAsk/delIcon.png" style="cursor: pointer;" />
        </div>
    </script>
    <script src="/res/third/layer/layer.js"></script>
    <script src="/res/third/laytpl/laytpl.js"></script>
    <script src="/res/third/layer/layer.extends.js"></script>
    <script src="/res/third/choosen/chosen.jquery.js"></script>
    <script src="/res/third/nice-validator/jquery.validator.js?local=zh-CN"></script>

<script type="text/javascript">



    $("#choosen").chosen({allow_single_deselect:true,search_contains:true}).change(function () {
        var v = $(this).val();
        if(v==-1){
            //全显
            var atttype = $(".tabButtActive").attr("atttype");

            if(atttype == 1){
                $(".tabButt").eq(1).click();
            }else if(atttype==2){
                $(".tabButt").eq(2).click();
            }else{
                $(".tabButt").eq(0).click();
            }
        }else{
            var recommend = $("#recommend_"+v);
            var attype = recommend.attr("atttype");

            if(attype == 1){
                $(".tabButt").eq(1).click();
            }else if(attype==2){
                $(".tabButt").eq(2).click();
            }else{
                $(".tabButt").eq(0).click();
            }
            $(".recommend_1,.recommend_2,.recommend_3").removeClass("recommend_show").addClass("recommend_hide");
            recommend.parents(".recommend_"+attype).removeClass("recommend_hide").addClass("recommend_show");
        }
    });

    /*tab切换
    * 父容器隐藏
    * */
    $(".choseBusi .tabButt").click(function(){

        $(".search-choice-close").click();
        $(".chosen-single-with-deselect").click();

        $(this).addClass("tabButtActive");
        $(this).siblings().removeClass("tabButtActive");
        var type = $(this).attr("atttype");
        if(type==0){
            //推荐的=集采+普通
            $(".recommend_1,.recommend_3").removeClass("recommend_hide").addClass("recommend_show");
        }else{
            $(".recommend_1,.recommend_2,.recommend_3").removeClass("recommend_show").addClass("recommend_hide");
            $(".recommend_"+type).removeClass("recommend_hide").addClass("recommend_show");
        }
    });

    /*删除悬浮**/
    $("#company_wrap").on("mouseover mouseout",".delSuply , .delSuplyActive" ,function(event){
        if(event.type == "mouseover"){
            $(this).children("img").attr("src","/res/images/priceAsk/delIconAc.png");
            $(this).children("span").css("color","#00b1db");
        }else if(event.type == "mouseout"){
            $(this).children("img").attr("src","/res/images/priceAsk/delIcon.png");
            $(this).children("span").css("color","#000");
        }
    });

    $("#subform").validator({
        theme:"yellow_top",
        formClass:"n-yellow",
        msgClass:"n-top",
        target:"#addtel",
        timely:2,
        focusCleanup:true,
        rules:{
            norepeat:function (element,params) {
                var tel = $(element).val().trim();
                if($("#id_"+tel).length > 0){
                    return "手机号已经存在";
                }else{
                    return true;
                }
            }
        },
        fields:{
            'addtel':"required; mobile; norepeat"
        }
    });



    function addTel(){
       if($("#subform").isValid()){
            var addtel = $("#addtel").val().trim();
           addModel(addtel,addtel,2);
        }
    }

    /*type=1 代表添加的商家,2代表手机号*/
    function addModel(title,id,type) {
        var data = {title:title,id:id,type:type};
        var gettpl = document.getElementById('demo').innerHTML;
        laytpl(gettpl).render(data, function(html){
            $("#company_wrap").append(html);
        });
    }

    /*根据id删除model*/
    function removeModel(id) {
        $("#id_"+id).remove();
    }


    /*删除 model 直接删除*/
    $("#company_wrap").on("click",".removesuply",function () {
        $(this).parent().remove();
        var id = $(this).attr("attid");
        $("#recommend_"+id).attr("checked",false);
    });


    $("body").on("click","input[name='recommend']",function () {
        var id = $(this).val();
        if($(this).is(":checked")){
            var title = $(this).next().html();
            addModel(title,id,1);
        }else{
            removeModel(id);
        }
    });


    $("#subtn").click(function () {
        var suplyclass = $("#company_wrap").find(".suplyclass");
        var size = suplyclass.size();
        if(size==0){
            layer.msgShort("至少要有一个供应商!");
        }else{
            //组织数据
            var ids =[];
            var names=[];
            var types =[];
            suplyclass.each(function () {
                ids.push($(this).attr("attid"));
                names.push($(this).attr("attname"));
                types.push($(this).attr("attype"));
            });
            layer.post({
                data:JSON.stringify({ids:ids,names:names,typess:types}),
                contentType:"application/json",
                url:"/enquiry/purchase/create/savechoose",
                success:function (data) {
                    if(data.success){
                    [#if projectId?? ]
                        location.href="/enquiry/purchase/create/${projectId}";
                    [#else ]
                        location.href="/enquiry/purchase/create/0";
                    [/#if]

                    }
                }
            },"正在处理");

        }

    }) 
	$('.inner.back-safe').css('minHeight',$(window).height()-200); 
</script>
</body>
</html>
